<template>
    <div>
        <ul class="file-multipart-viewbox">
            <template v-for="item in fileList">
                <li v-if="'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng,ico'.indexOf(item.suffix)>-1">
                    <div>
                        <img :src="item.url" :alt="item.name" :title="item.name"/>
                        <div class="preview">
                            <el-icon @click="handlePreview(item)">
                                <ZoomIn/>
                            </el-icon>
                            <el-icon @click="handleDel(item)">
                                <Delete/>
                            </el-icon>
                        </div>
                    </div>
                </li>
                <li v-else>
                    <div>
                        <span :title="item.name"><a :href="item.url" target="_blank">{{ item.name }}</a></span>
                        <div class="preview">
                            <el-icon @click="handleDel(item)">
                                <Delete/>
                            </el-icon>
                        </div>
                    </div>
                </li>
            </template>
            <li>
                <div class="plus">
                    <el-icon @click="handlePlus">
                        <Plus/>
                    </el-icon>
                </div>
            </li>
        </ul>
        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
        </el-dialog>
        <el-dialog title="文件上传" v-model="fileOpen" width="800px" append-to-body>
            <FileMultipart @success="uploadSuccess"></FileMultipart>
        </el-dialog>
    </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
// 文件分片上传组件
import FileMultipart from "@/components/FileMultipart/index.vue"

const props = defineProps({
    //文件值
    fileValue: [String, Object, Array],
    //多文件分割符，默认为“,”
    separator: [String],
    //上传完成后是否继续，false不继续上传窗口将会关闭，true 继续上传窗口不会关闭
    uploadSuccessContinue: [Object],
    //上传文件格式
    suffix: [Array]
});

const userStore = useUserStore();
const {proxy} = getCurrentInstance();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const fileList = ref([]);
const fileOpen = ref(false);

function getFile(filename){
    var file={};
    if (typeof filename === "string") {
        var name = "";
        var suffix = "";
        if (filename.lastIndexOf("/") > -1) {
            name = filename.substring(filename.lastIndexOf("/") + 1, filename.length);
        }
        if (filename.lastIndexOf(".") > -1) {
            suffix = filename.substring(filename.lastIndexOf(".") + 1, filename.length);
        }
        file = {name: name, suffix: suffix, filename: filename,url: userStore.ossUrl(filename)};
    }
    return file;
}

watch(() => props.fileValue, val => {
    if (val) {
        var sep = props.separator == null || props.separator.length == 0 ? ',':props.separator;
        // 首先将值转为数组
        const list = Array.isArray(val) ? val : props.fileValue.split(sep);

        fileList.value = list.map(filename => {
            return getFile(filename);
        });

    } else {
        fileList.value = [];
        return [];
    }
}, {deep: true, immediate: true});


// 预览
function handlePreview(file) {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true;
}
//删除操作
function handleDel(srcFile) {
    var arr=[];
    var value=[];
    for(var i=0;i<fileList.value.length;i++){
        if(fileList.value[i].filename != srcFile.filename){
            arr.push(fileList.value[i]);
            value.push(fileList.value[i].filename)
        }
    }
    fileList.value=arr;
    var sep = props.separator == null || props.separator.length == 0 ? ',':props.separator;
    proxy.$emit('removeSuccess', value.join(sep))
}
//上传完成回调
function uploadSuccess(url) {
    if(!props.uploadSuccessContinue){
        fileOpen.value=false;
    }
    fileList.value.push(getFile(url))
    proxy.$emit('uploadSuccess', url)
}
function handlePlus(){
    fileOpen.value=true;
}
</script>
<style lang="scss" scoped>
</style>

